<template>
    <view class="details">
        <!-- 导航栏 -->
        <uni-nav-bar class="uni-navbar" fontSize="60" color="#000" title="车辆详情" backgroundColor="#fff" :shadow="false"
            :border="false">
            <block slot="left">
                <uni-icons @click="goback" color="#111111" type="left" size="24"></uni-icons>
            </block>
        </uni-nav-bar>
        <!-- 分组轮播 -->
        <view class="group-carousel">
            <next-swiper-group :dataList="dataList" :dictOptions="dictOptions" :showTitle="false" :height="240"
                :loading="false" :autoplay="false"></next-swiper-group>
            <!--  参团offered 惠购huigou-->
            <view class="activity-tag" :class="{ 'offered': state === 1, 'huigou': state === 2 }">
                <view class="activity-con">
                    <view class="text" v-if="state === 1"><text class="num">10</text>人成团，当前参团<text class="num">8</text>人
                    </view>
                    <view class="text" v-else>惠购价格<text class="num">7.29万</text></view>
                    <view class="btn">
                        <text v-if="state === 1">参团</text>
                        <text v-else>优惠</text>
                        <uni-icons type="right" color="#fff" size="10"></uni-icons>
                    </view>
                </view>
                <view class="square"></view>
            </view>
        </view>

        <!-- 详情内容 -->
        <view class="details-content">
            <view class="details-title">
                领克09 EM-P 2023 款 2.0TD 亚运行政版六
                座P
            </view>
            <view class="param">
                <view class="left">
                    <view class="price">31.98万起</view>
                    <view class="guide-price">指导价 28.99万-34.29万</view>
                </view>
                <view class="right">
                    <image class="icon" src="~@/static/images/dicon1.png" mode="aspectFill"></image>
                    <view class="text">配置参数</view>
                </view>
            </view>

            <view class="details-imgs">
                <image class="imgs" src="~@/static/images/dimg1.jpg" mode="aspectFill"></image>
                <image class="imgs" src="~@/static/images/dimg1.jpg" mode="aspectFill"></image>
            </view>

        </view>
        <view class="goods-carts">
            <view class="footer">
                <view class="left">
                    <button class="footer-btn" @click="handleServiceClick">
                        <image class="icon" src="~@/static/images/kefuicon.png" mode="aspectFill"></image>
                        <view class="text">客服</view>
                    </button>
                    <button class="footer-btn button2" @click="handleConfigClick">
                        <image class="icon" src="~@/static/images/csicon.png" mode="aspectFill"></image>
                        <view class="text">配置</view>
                    </button>
                </view>
                <view class="right">
                    <view class="big-button" @click="handleBigButtonClick('bottom')">报名参团/报名优惠</view>
                </view>
            </view>
        </view>
        <!-- 弹窗 -->
        <contact-popup ref="contactPopup"></contact-popup>
    </view>
</template>

<script>
import contactPopup from "@/components/contact-popup.vue"
export default {
    components: {
        contactPopup
    },
    data() {
        return {
            dataList: [{
                dict: 'a',
                src: '/static/images/details1.jpg',
                title: '',
            }, {
                src: 'https://cdn.uviewui.com/uview/resources/video.mp4',
                title: '',
                poster: 'https://img0.baidu.com/it/u=3338260662,707633225&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                type: 'video'
            }, {
                dict: 'c',
                src: 'https://cdn.uviewui.com/uview/resources/video.mp4',
                title: '',
                type: 'video'
            }, {
                src: 'https://img1.baidu.com/it/u=2812417321,4100104782&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
                title: '',
                poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
            }, {
                src: 'https://img0.baidu.com/it/u=872191938,2315298208&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                title: '',
                dict: 'b',
            }, {
                src: 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                title: '',
                dict: 'b',
            }],

            dictOptions: [
                {
                    value: 'a',
                    title: '外观'
                }, {
                    value: 'b',
                    title: '内饰'
                }, {
                    value: 'c',
                    title: '细节'
                }
            ],
            // 参团是1，惠购是2
            state: 2

        }
    },
    created() {
        // #ifdef H5
        this.offsetTop = 43;
        this.offsetTop = 0;
        // #endif
    },
    onLoad() {
    },
    methods: {
        goback() {
            uni.navigateBack({ delta: 1 });
            // uni.switchTab({
            //     url: '/pages/home/index'
            // })
        },
        handLocation() { },
        clickBannerItem(item) {
            console.info(item)
        },
        changeSwiper(e) {
            this.current = e.detail.current
        },
        goToDetail(index) {
            // 跳转到详情页的代码
            // 可以使用uni.navigateTo或uni.redirectTo等API实现页面跳转
        },
        // 内容滑动中触发
        slideChange() {
            this.locked = true
        },
        // 内容页滑动结束时触发
        slideEnd() {
            this.locked = false
        },
        handleServiceClick() {
            // 处理客服按钮点击事件
        },
        handleConfigClick() {
            // 处理配置按钮点击事件
        },
        handleBigButtonClick(type) {
            this.$refs.contactPopup.$refs.popup.open(type)
        },
    }
}
</script>

<style lang="scss" scoped>
page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
    min-height: 100%;
    height: auto;
}

.example-body {
    padding: 0;
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
}
</style>
